<template>
	<view>
		<view class="header-info">
			<image @tap="goBack" src="/static/images/xiangzuo.png" mode="aspectFit"
				style="width: 17upx;height: 30upx;position: absolute;top:118upx;left: 34upx;"></image>
			<image :src="avatar" mode="aspectFill" class="header-info-headimg" />
			<text class="header-info-nickname">{{realname}}</text>
			<view class="header-data">
				<view class="header-data-left" @tap="attentionMe">
					<text class="header-data-data">{{oInfo.total1}}</text>
					<text class="header-data-title">关注</text>
				</view>

				<view class="header-data-center" @tap="myAttentions">
					<text class="header-data-data">{{oInfo.total2}}</text>
					<text class="header-data-title">粉丝</text>
				</view>
				<view class="header-data-right">
					<text class="header-data-data">{{oInfo.total3}}</text>
					<text class="header-data-title">点赞和收藏</text>
				</view>
			</view>
			<view class="header-info-introduce">{{oInfo.introduction}}</view>
			<view class="header-info-btn" @tap="editUser">编辑资料</view>
		</view>
		<view class="" style="height: 56upx;border-bottom: #f5f5f5;">

		</view>
		<view class="videos">
			<view class="videos-titles">
				<text class="videos-title" :class="[index == 0?'active':'']" @tap="select(0)">作品</text>
				<text class="videos-title" :class="[index == 1?'active':'']" @tap="select(1)">点赞</text>
				<text class="videos-title" :class="[index == 2?'active':'']" @tap="select(2)">收藏</text>
			</view>
			<view class="video-list" style="position: relative;">
				<view v-if="totalNum == 0" class="empty">
					<image src="/static/images/zanwushuju.png" alt="" class="empty-img"></image>
				</view>
				<view v-else class="videos-item" v-for="(item,index1) in currentVideosList" :key="index1">
					<image class="avatar" @tap="goVideosList(index1)" :src="item.cover_img" mode="scaleToFill"
						style="width: 98%;height: 100%;">
					</image>
					<view class="videos-item-praise" v-if="index == 0">
						<image src="@/static/img/videos/bofang2.png" mode="widthFix" style="width: 28upx;"></image>
						<text style="margin-left: 9upx;color:#ffffff;">{{item.broswer_num}}</text>
					</view>
					<view class="videos-item-praise" v-else-if="index == 1">
						<image src="@/static/img/videos/like.png" mode="widthFix" style="width: 28upx;"></image>
						<text style="margin-left: 9upx;color:#ffffff;">{{item.praise_num}}</text>
					</view>
					<view class="videos-item-praise" v-else-if="index == 2">
						<image src="@/static/img/videos/collect.png" mode="widthFix" style="width: 28upx;"></image>
						<text style="margin-left: 9upx;color:#ffffff;">{{item.collect_num}}</text>
					</view>

					<image v-if="index == 0" @tap="del(index1);" src="@/static/img/videos/delete.png" mode="widthFix"
						style="width: 32upx;position: absolute;top: 9px;right: 9px;"></image>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				realname: '佚名',
				avatar: '/static/images/touxiang.png',
				oInfo: {},
				currentVideosList: [],
				navList: [{
						state: 0,
						text: '作品',
						loadingType: 'more',
						page: 1,
						url: '/my_vedios',
						totalCount: 0,
						dataList: []
					},
					{
						state: 1,
						text: '点赞',
						loadingType: 'more',
						page: 1,
						url: '/my_praise_vedios',
						totalCount: 0,
						dataList: []
					},
					{
						state: 2,
						text: '收藏',
						loadingType: 'more',
						page: 1,
						url: '/my_collect_vedios',
						totalCount: 0,
						dataList: []
					}
				],
				totalNum: 0,
				index: 0,
				msgType: 'info',
			}
		},
		onLoad() {
			this.getInfo();
			this.getVideosList()

			uni.$on('refreshMyVideo', () => {
				this.getVideosList('refresh')
			});
		},
		//下拉到底获取新的数据
		onReachBottom() {
			this.getVideosList()
		},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			async getInfo() {
				let res = await this.$myRequest({
					url: '/video_count',
					methods: "POST",
					data: {
						token: uni.getStorageSync('token'),
					},
				})

				if (res.data.status == 1) {
					this.oInfo = res.data.data
					if (this.oInfo.name) {
						this.realname = this.oInfo.name
					}
					if (this.oInfo.avatar) {
						this.avatar = this.oInfo.avatar
					}

					this.is_attention = this.oInfo.is_attention
				}
			},

			async getVideosList(type = 'add') {
				//这里是将订单挂载到tab列表下
				let index = this.tabCurrentIndex;
				let navItem = this.navList[this.index];

				if (navItem.loadingType == 'noMore' && type === 'add') {
					//tab切换只有第一次需要加载数据
					return;
				}
				if (navItem.loadingType === 'loading') {
					//防止重复加载
					return;
				}

				navItem.loadingType = 'loading';
				this.getLists(type);
				// orderList.forEach(item => {
				// 	navItem.orderList.push(item);
				// })
				setTimeout(() => {
					//loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
					this.$set(navItem, 'loaded', true);
					// //判断是否还有数据， 有改为 more， 没有改为noMore 
					// navItem.loadingType = 'more';
				}, 600);

			},

			async getLists(type) {
				let item = this.navList[this.index];
				if (type == 'refresh') {
					item.page = 1;
					item.loadingType = 'more';
					item.totalCount = 0;
					item.dataList = []
				}
				let res = await this.$myRequest({
					url: item.url,
					methods: "POST",
					data: {
						token: uni.getStorageSync('token'),
						page: item.page
					},
				})
				if (res.data.status == 1) {
					item.totalCount = res.data.data.totalNum;
					let ndata = res.data.data.list;

					if (ndata.length > 0) {
						item.dataList = [...item.dataList, ...ndata];
						if (item.dataList.length < item.totalCount) {
							item.page = item.page + 1;
						} else {
							item.loadingType = 'noMore';
						}
					}
					this.navList[this.index] = item
					this.currentVideosList = this.navList[this.index].dataList
					this.totalNum = item.totalCount
				}
			},

			// 编辑
			async editUser() {
				let url = '/pages/user/userData'
				// console.log(url)
				uni.navigateTo({
					url: url
				})
			},
			select(toIndex) {
				this.index = toIndex
				this.currentVideosList = this.navList[toIndex].dataList
				this.totalNum = this.navList[toIndex].totalCount
				if (this.currentVideosList.length == 0) {
					this.getVideosList()
				}
			},
			// 收藏
			async myCollectVedios() {
				let res = await this.$myRequest({
					url: '/my_collect_vedios',
					methods: "POST",
					data: {
						page: this.page,
						token: uni.getStorageSync('token')
					},
				})
				if (res.data.status == 1) {
					this.collectList = res.data.data
				}
			},

			goVideosList(index1) {
				let url = 'videos-list-app';
				// #ifdef APP-PLUS
				url = 'videos-list-app';
				// #endif
				// console.log(this.index)
				// console.log(index1)
				switch (this.index) {
					case 0:
						// console.log('/pages/videos/' + url + '?tuid=' + this.oInfo.uid +
						// 		'&index=' + index1 + '&is_mine=1')
						uni.navigateTo({
							url: '/pages/videos/' + url + '?tuid=' + this.oInfo.uid +
								'&index=' + index1 + '&is_mine=1'
						})
						break;

					case 1:
						uni.navigateTo({
							url: '/pages/videos/' + url + '?field=praise' +
								'&index=' + index1 + '&is_mine=1'
						})
						break;
					case 2:
						uni.navigateTo({
							url: '/pages/videos/' + url + '?field=collect' +
								'&index=' + index1 + '&is_mine=1'
						})
						break;
				}
			},

			async del(index) {
				let id = this.currentVideosList[index].id

				let res = await this.$myRequest({
					url: '/del_my_vedio',
					methods: "POST",
					data: {
						token: uni.getStorageSync('token'),
						id: id,
					},
				})

				this.$api.msg(res.data.msg)

				if (index + 1 == this.currentVideosList.length) {
					uni.redirectTo({
						url: '/pages/video-resources/user-video'
					})
				} else {
					this.currentVideosList.splice(index, 1);
					this.totalNum = this.currentVideosList.length
				}
			},

			attentionMe() {
				uni.navigateTo({
					url: '/pages/video-resources/attention-video'
				})
			},

			myAttentions() {
				uni.navigateTo({
					url: '/pages/video-resources/follow-video'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header-info {
		padding-top: 90upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.header-info-headimg {
		width: 194rpx;
		height: 194rpx;
		border-radius: 97rpx;
	}

	.header-info-nickname {
		height: 100upx;
		line-height: 100upx;
		font-size: 32upx;
	}

	.header-data {
		height: 80upx;
		display: flex;
		width: 60%;
		justify-content: space-between;
	}

	.header-data-left,
	.header-data-center,
	.header-data-right {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 28upx;
	}

	.header-info-introduce {
		color: #8b8e90;
		font-size: 28upx;
		padding: 54upx;
	}

	.header-info-btn {
		height: 88upx;
		width: 428upx;
		background-color: #e80808;
		border-radius: 10upx;
		color: #fff;
		font-size: 30upx;
		display: flex;
		align-items: center;
		justify-content: center;
		letter-spacing: 4upx;
	}

	.videos {
		width: 100%;
	}

	.videos-titles {
		width: 100%;
		height: 94upx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.videos-title {
		width: 33.3%;
		line-height: 90upx;
		color: #333;
		text-align: center;
		margin: 0 auto;
		letter-spacing: 4upx;
	}

	.active {
		color: #e80808;
		border-bottom: solid #e80808 4upx;
	}

	.videos-item {
		width: 33.3%;
		height: 330upx;
		float: left;
		position: relative;
	}

	.videos-item-praise {
		position: absolute;
		left: 16upx;
		bottom: 16upx;
	}

	.empty {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, 0);
		padding-top: 150upx;

		.empty-img {
			width: 182rpx;
			height: 182rpx;
		}
	}
</style>